<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>


    






    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        
        必知必会 

        <div class="root-box">
            <div class="container left">
                <div class="content">
                    <h2>2017</h2>
                    <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
                        mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
                        primis ea eam.</p>
                </div>
            </div>
            <div class="container right">
                <div class="content">
                    <h2>2016</h2>
                    <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
                        mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
                        primis ea eam.</p>
                </div>
            </div>
        </div>
        
        
        绘制三角形:
        .left::before {
                          上 , 右 , 下 ,  左 
            border-color: red blue black white;
    
        时间线:
        .root-box::after {
            content: '';
            position: absolute;
            /*    这条时间线的宽度    */
            width: 5px;
            background-color: white;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }
    
        时间线的 圆点:
        .container::after {
            content: '';
            position: absolute;
            right: -17px;
            width: 25px;
            height: 25px;
            background-color: white;
            border: 4px solid #FF9F55;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

    </xmp>





    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-color: lightgoldenrodyellow;
        }

        /* The actual root-box (the vertical ruler) */
        /*  总盒子    */
        .root-box {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
            background: lightpink;    /*  总盒子设置为粉红色  */
        }

        /*   这条垂直的 时间线 , 通过伪元素实现  */
        .root-box::after {
            content: '';
            position: absolute;
            width: 5px;
            background-color: white;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }

        /* Container around content */
        .container {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
            background: lightgreen;
        }

        /*   时间线的 圆点    */
        .container::after {
            content: '';
            position: absolute;
            right: -17px;
            width: 25px;
            height: 25px;
            background-color: white;
            border: 4px solid #FF9F55;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

        /*   时间线的左盒子    */
        .left {
            left: 0;
        }

        /*   时间线的右盒子   */
        .right {
            left: 50%;
        }
        .right::after {
            left: -16px;
        }

        /*  左 - 小箭头   */
        .left::before {
            content: " ";
            height: 0;
            position: absolute;
            top: 22px;
            width: 0;
            z-index: 1;
            right: 20px;
            border: medium solid white;
            border-width: 10px;
            /*             上 ,   右 ,   下 ,     左    */
            /* border-color: red blue black white; */
            border-color: transparent transparent transparent red;
        }
        /*  右 - 小箭头    */
        .right::before {
            content: " ";
            height: 0;
            position: absolute;
            top: 22px;
            width: 0;
            z-index: 1;
            left: 20px;
            border: medium solid white;
            border-width: 10px;
            border-color: transparent black transparent transparent;
        }
        /* The actual content */
        .content {
            padding: 20px 30px;
            background-color: white;
            position: relative;
            border-radius: 6px;
        }





        /* Media queries - Responsive root-box on screens less than 600px wide */
        @media screen and (max-width: 600px) {

            /* Place the timelime to the left */
            .root-box::after {
                left: 31px;
            }

            .container {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }

            /* Make sure that all arrows are pointing leftwards */
            .container::before {
                left: 60px;
                border: medium solid white;
                border-width: 10px 10px 10px 0;
                border-color: transparent white transparent transparent;
            }

            /* Make sure all circles are at the same spot */
            .left::after,
            .right::after {
                left: 15px;
            }

            /* Make all right containers behave like the left ones */
            .right {
                left: 0%;
            }
        }
    </style>
    <div class="root-box">
        <div class="container left">
            <div class="content">
                <h2>2017</h2>
                <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
                    mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
                    primis ea eam.</p>
            </div>
        </div>
        <div class="container right">
            <div class="content">
                <h2>2016</h2>
                <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
                    mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
                    primis ea eam.</p>
            </div>
        </div>
    </div>




    <hr>

    <style>
        #test{
            width: 100px;
            height: 100px;
            border: 100px solid;
            border-color: yellow black green red; 
        }
    </style>
    <div id="test"></div>
    <h1>上 , 右 , 下 ,  左   =>   border-color: yellow black green red; </h1>
</body>

</html>